<template>
	<view class="container">
		<carHeader style="padding:10rpx;"
		  :title="'订单详情'"></carHeader>
		
		<view class="info">
			<view class="one">
				<view>
					<text  space="nbsp">核销码 {{list.hexiao}}</text>
				</view>
				<view>
					<text class="content">车辆：{{list.yonghucheliang.yhclType}}/{{list.yonghucheliang.yhclCarNum}}</text>
				</view>
			</view>
			
			<view class="one" >
				<view>
					<text >服务内容</text>
				</view>
				<view>
					<text class="content" >
						{{list.serviceNames}}
					</text>
					<text class="detail">
					 {{list.yuanPrice}}
					 </text>
				</view>
			</view>
			
			<view class="one" style="border-bottom: none;">
				<view>
					<text >订单信息</text>
				</view>
				
				<view>
					<text class="content" >
						原价
					</text>
					<text class="detail">{{list.yuanPrice}}</text>
				</view>
				
				<view>
					<text class="content" >
						优惠
					</text>
					<text class="detail" v-if="list.sjyouhui.sjyhType === '满减' && list.sjyouhui.sjyhTriggerMoney <= list.yuanPrice">
						{{list.sjyouhui.sjyhPreferentialMoney}}
					</text>
					<text class="detail" v-else-if="list.sjyouhui.sjyhType === '满减'">
						0
					</text>
					<text class="detail" v-else>
						{{list.yuanPrice - list.yuanPrice * list.sjyouhui.sjyhDiscount}}
					</text>
				</view>
				
				<view>
					<text class="content" >
						实付金额
					</text>
					<text class="detail" v-if="list.sjyouhui.sjyhType === '满减' && list.sjyouhui.sjyhTriggerMoney <= list.yuanPrice">
						{{list.yuanPrice - list.sjyouhui.sjyhPreferentialMoney}}
					</text>
					<text class="detail" v-else-if="list.sjyouhui.sjyhType === '满减'">
						{{list.yuanPrice}}
					</text>
					<text class="detail" v-else>
						{{list.yuanPrice * list.sjyouhui.sjyhDiscount}}
					</text>
				</view>
				
				<view>
					<text class="content" >
						订单编号
					</text>
					<text class="detail" >{{list.ddNumber}}</text>
				</view>
				
				<view>
					<text class="content" >
						预约时间
					</text>
					<text class="detail" >{{list.ddYuyueTime}}</text>
				</view>
				
				<view>
					<text class="content" >
						支付时间
					</text>
					<text class="detail" >{{list.ddPayTime}}</text>
				</view>
				
				<view>
					<text class="content" >
						核销时间
					</text>
					<text class="detail" >{{list.ddHexiaoTime}}</text>
				</view>
				
			</view>
		</view>
		
		
		<view class="btn">
			<u-button @click="dialogToggle('info')"
			:disabled="isVerified"
			type="primary" 
			:color="isVerified ? '#808080' : '#0662E6'"
			shape="circle" 
			>
			{{isVerified ? '已核销' : '确认核销'}}</u-button>
			<!-- <view v-else>已核销</view> -->
		</view>
		 
		
		
		<view>
		<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog 
				:type="msgType"
				cancelText="取消" 
				confirmText="确认" 
				title="核销此订单" 
				content="请您仔细核对订单,此操作不可撤销请谨慎操作!" 
				@confirm="dialogConfirm"
				@close="dialogClose">
				</uni-popup-dialog>
			</uni-popup>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					code:"MC1234-5678-9012",
					carName:"奔驰FWE4",
					card:"豫A98FHJ"
				},
				orderInfo:{
					originaPrice:"￥110",
					discount:"￥20",
					finalPrice:"￥90.00",
					orderNumber:"1223233445",
					appointmentTime:"2023-03-18 19:00:00",
					payTime:"2023-03-18 19:14:28",
					verificationTime:""
				},
				list:[],
				status:'',
				msgType:"info",
				isVerified:false,
				ddNumber:'',
				ddHexiaoTime:''
			};
		},
		onLoad(options) {
			// 解构options对象以获取id参数
			this.ddNumber = options.ddNumber;
			console.log(this.ddNumber)
			this.showList();
		},
		methods:{
			dialogToggle(type) {
				this.msgType = type
				console.log(type);			
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				if(this.status == 0){
					uni.showToast({
					    title: '当前订单状态是未支付，不可核销订单',
					    icon: 'none', // 使用无图标样式，通常用于错误或警告信息
					    duration: 2000 // 显示时间，单位毫秒
					});
					this.isVerified=false
				};
				if(this.status == 3 || this.status == 4){
					uni.showToast({
					    title: '当前订单状态是已取消或已退款，不可核销订单',
					    icon: 'none', // 使用无图标样式，通常用于错误或警告信息
					    duration: 2000 // 显示时间，单位毫秒
					});
					this.isVerified=false
				};
				if(this.status == 1){ 
					const now = new Date();  
					  
					// 初始化日期时间各个部分  
					let year = now.getFullYear();  
					let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份加1，并补全为两位数  
					let day = String(now.getDate()).padStart(2, '0'); // 补全为两位数  
					let hours = String(now.getHours()).padStart(2, '0'); // 补全为两位数  
					let minutes = String(now.getMinutes()).padStart(2, '0'); // 补全为两位数  
					let seconds = String(now.getSeconds()).padStart(2, '0'); // 补全为两位数  
					  
					// 拼接成 'yyyy-MM-dd HH:mm:ss' 格式的字符串  
					this.ddHexiaoTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;  
					  
					console.log(this.ddHexiaoTime); // 输出类似 '2023-04-01 12:34:56'
					uni.request({
					    url: 'http://localhost:8080/shop/dingdan',
					    method: 'PUT',
					    data: {
							status:2,
							ddHexiaoTime:this.ddHexiaoTime,
							ddNumber:this.ddNumber
						},
					    success: (res) => {
					        
					        this.isVerified=true;
					    },
					    fail: (error) => {
					        console.error('Request failed:', error);
					        uni.showToast({
					            title: '网络请求失败',
					            icon: 'none'
					        });
					    }
					});
				};
					
				// this.isVerified=true
				// this.isVerified=true;
				 // 获取当前时间并更新注销时间  
				const now = new Date();  
				this.orderInfo.verificationTime = now.toLocaleString(); 
			},
			dialogClose() {
				console.log('点击关闭')
			},
			showList(){
				uni.request({
					url: 'http://localhost:8080/shop/dingdan/list',
					method: 'POST',
					data:{
						ddNumber:this.ddNumber
					},
					success: (res) => {
						this.list = res.data.rows[0];		
						this.status = this.list.status;
						if(this.status==2){
							this.isVerified=true
						}
					},
				});
			},
			
		}
	}
</script>

<style lang="scss">
	
	.info{
		background-color: white;
		height: 1100rpx;
		width: 95%;
		position: absolute;
		top: 150rpx;
		left: 20rpx;
		border-radius: 20rpx;
		z-index: 1
	}
	.btn{
		margin: 930rpx auto;
		width: 70%;
	}
	.one{
		margin: 50rpx 30rpx;
		border-bottom: 5px solid #F9F9F9;
		view{
			margin-bottom: 30rpx;
			.content{
				font-size: 13px;
			}
			.detail{
				font-size: 13px;
				float: right;
			}
		}
	}
	

</style>
